<template>
  <div class="form_box">
    <!-- 当表单内含有tinymce富文本组件时,且在相同页面进行查看和编辑的切换,请给BasicForm绑定key -->
    <BasicForm
      :key="query?.modalOrPageType"
      :use-type="query?.modalOrPageType"
      :form-list="formList"
      :form-instance-props="formInstanceProps"
      :grid-props="gridProps"
      :prop-form-data="formData"
      @update-form-data="updateFormData"
      @validate-pass="submit"
    ></BasicForm>
  </div>
</template>

<script setup lang="ts">
/**
 * 页面路由模式
 */
import { FormProps, GridProps } from 'naive-ui'
import { PropsForm } from '@/components/basicForm/types'

const { query } = useRoute() as any

/** 表单项 */
const formList = computed(() => {
  return [
    {
      label: '企业名称:',
      key: 'company_name',
      component: 'NInput',
      span: 12,
      required: true,
      originProps: {
        labelPlacement: 'left' // formItem/formItemGi的原生属性可以在这里设置
      }
    },
    {
      label: '企业类型111111:',
      key: 'company_type',
      span: 12,
      component: 'NSelect',
      required: true,
      hidden: false,
      componentProps: {
        options: [
          // NSelect的原生属性可以在这里设置
          {
            label: '选项11',
            value: '选项11'
          }
        ],
        'onUpdate:value': (val: string) => {
          console.log(val, 'val')
          // 在此可做其他项依赖此项值变化的操作
        }
      }
    },
    {
      label: '企业类型222222222:',
      key: 'company_type2',
      component: 'NSelect'
    },
    {
      label: '企业类型22244444:',
      key: 'fdsfds',
      component: 'NCheckboxGroup',
      componentProps: {
        max: 1 // NCheckboxGroup的原生属性可以在这里设置
      },
      checkBoxOptions: [
        {
          label: '苹果',
          value: 'apple',
          disabled: true // checkBox的原生属性可以在这里设置
        },
        {
          label: '香蕉',
          value: 'banana'
        }
      ],
      transferValue: (value) => {
        return value.join(',')
      }
    },
    {
      label: '企业类型3333:',
      key: 'hhhh2',
      component: 'NRadioGroup',
      componentProps: {
        max: 1 // NRadioGroup的原生属性可以在这里设置
      },
      // radioType: 'NRadioButton',
      radioOptions: [
        {
          label: '苹果',
          value: 'apple',
          disabled: true // radio的原生属性可以在这里设置
        },
        {
          label: '香蕉',
          value: 'banana'
        }
      ]
    },
    {
      label: '图片:',
      key: 'photo',
      component: 'NUpload',
      isShowProcess: true,
      span: 24,
      required: false,
      componentProps: {
        accept: '.pdf,.png,.docx',
        max: 2,
        size: 5,
        listType: 'text',
        showDownloadButton: true,
        directoryDnd: true,
        multiple: true,
        showTrigger: true // 当为查看模式的时候，此处设置为false
      }
    },
    {
      label: '日期:',
      key: 'date',
      component: 'NDatePicker',
      span: 24,
      required: false,
      componentProps: {
        valueFormat: 'yyyy-MM-dd'
        // valueFormat: 'yyyy.MM.dd HH:mm:ss'
      }
    },
    {
      label: '时间:',
      key: 'time',
      component: 'NTimePicker',
      span: 24,
      required: true,
      componentProps: {
        valueFormat: 'HH:mm:ss'
      }
    },
    {
      label: '评价:',
      key: 'pj',
      component: 'NRate',
      span: 24,
      required: true,
      componentProps: {}
    },
    {
      label: '评价22:',
      key: 'pj2',
      component: 'NSlider',
      span: 12,
      required: true,
      componentProps: {}
    },
    {
      label: '开关:',
      key: 'sgf',
      component: 'NSwitch',
      span: 12,
      required: true,
      componentProps: {},
      transferValue: (value) => {
        console.log(value)
        if (value) return '是'
        return '否'
      }
    },
    {
      label: '正文:',
      key: 'content',
      component: 'Editor',
      componentProps: {
        inline: false,
        init: {
          height: 600
        }
      }
    }
  ] as PropsForm
})
/** form标签原生属性 */
const formInstanceProps: FormProps = {
  labelPlacement: 'left',
  labelAlign: 'right',
  labelWidth: 130,
  showRequireMark: false
}
/** grid布局标签原生属性 */
const gridProps: GridProps = {
  xGap: 12
}
/** 表单数据 */
const formData = ref<any>()
/** 更新表单数据 */
function updateFormData(val: any) {
  formData.value = val
}
/** 验证 */
function submit() {
  // 验证通过，可以提交数据了
}

/** 获取详情信息 */
async function getDetail() {
  const { id } = query
  if (!id) {
    window.$message.warning('id为空')
    return
  }

  // const {data} = xxxx({id})
  formData.value = {
    company_name: 'xxx企业的烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦',
    company_type: '选项11',
    company_type2:
      '2233333333333333333333333333333333333333333333333333333333333333333333333333333333333333333',
    fdsfds: ['banana'],
    hhhh2: 'apple',
    photo: [
      {
        id: '1693389049291',
        name: '员工自购电脑补贴协议.pdf',
        status: 'finished',
        percentage: 100,
        url: 'https://bstig-oss.aihuoshi.net/bhzs/2023_08_30/17_50_51/%E5%91%98%E5%B7%A5%E8%87%AA%E8%B4%AD%E7%94%B5%E8%84%91%E8%A1%A5%E8%B4%B4%E5%8D%8F%E8%AE%AE.pdf'
      }
    ],
    date: '2023-09-04',
    time: '01:01:16',
    pj: 2,
    pj2: 80,
    sgf: true,
    content:
      '<p><img src="https://isp-prod.oss-cn-hangzhou.aliyuncs.com/2023_09_14/13_41_35/red-light.png" alt="" width="40" height="40">这是一张图片</p>'
  }
}

/** 初始化弹窗 */
function initPage() {
  const { modalOrPageType } = query
  switch (modalOrPageType) {
    case '查看':
    case '编辑':
      getDetail()
      break
    default:
      break
  }
}
initPage()

// 表单项有逻辑关系例如某一项的值或选项依赖另一项变化
// 1.可在此修改formData， formList， 没有可以去除, 以下为示例
// 2.直接在formList中的componentProps属性里编辑值更新回调函数修改
// watch(
//   () => formData.value.company_type,
//   (val: any) => {
//     console.log(val)
//     if (val) {
//       formList.value[2].hidden = true
//       formData.value.company_name = null
//     }
//   },
//   { deep: true }
// )
</script>

<style lang="less" scoped>
.form_box {
  height: 100%;
  overflow-y: auto;
  padding-right: 48px;
}
</style>
